<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		html, body {
		      height: 100%;
			width: 100%;
		}
	</style>
</head>
<body>
	<!-- open -->
	<dialog id="dialogModal">
		<form method="dialog">
			<button>ok</button>
		</form>
		<div>1212</div>
	</dialog>
	<button id="btn">showModel</button>
	<script>
		btn.addEventListener('click', function (event) {
			event.stopPropagation()
			dialogModal.showModal()
		})
		var body = document.body;
		body.addEventListener('click', function () {
			dialogModal.close()
		})
	</script>
</body>
</html>